<template>
  <div class="dashboard-container">
    <!-- 顶部经营数据区域 -->
    <div class="top-operation">
      <div class="operation-title">经营数据</div>
      <div class="date-picker">
        <span>选择日期：</span>
        <el-date-picker
            v-model="startTime"
            type="date"
            placeholder="开始时间"
            value-format="YYYY-MM-DD"
        />
        <el-button
            type="primary"hh
            style="margin-left: 10px;"
            @click="handleQuery"
        >
          查询
        </el-button>
      </div>
    </div>
    <div class="divider-line"></div>
    <div class="top-stats">
      <div class="stat-card green">
        <div class="stat-content">
          <p class="stat-label">今日订单总额（元）</p>
          <p class="stat-value">{{orderSumMoney.data || '0'}}</p>
        </div>
        <img src="/美元.png" class="stat-img" alt="订单总额图标">
      </div>
      <div class="stat-card purple">
        <div class="stat-content">
          <p class="stat-label">今日订单总数</p>
          <p class="stat-value">{{orderCount.data || '0'}}</p>
        </div>
        <img src="/订单.png" class="stat-img" alt="订单总数图标">
      </div>
      <div class="stat-card blue">
        <div class="stat-content">
          <p class="stat-label">今日新增用户数</p>
          <p class="stat-value">{{userAddCount.data || '0'}}</p>
        </div>
        <img src="/群组多人.png" class="stat-img" alt="新增用户图标">
      </div>
      <div class="stat-card orange">
        <div class="stat-content">
          <p class="stat-label">今日新增商户</p>
          <p class="stat-value">{{merchantAddCount.data || '0'}}</p>
        </div>
        <img src="/新增用户.png" class="stat-img" alt="新增商户图标">
      </div>
    </div>

    <!-- 中间统计模块 -->
    <div class="middle-section">
      <div class="panel order-stat">
        <div class="panel-header">
          <i class="el-icon-s-data"></i>
          <span>订单统计</span>
        </div>
        <div class="divider-line"></div>
        <div class="chart-container">
          <!-- 订单统计饼图容器 -->
          <div id="orderPieChart" style="width: 100%; height: 180px;"></div>
        </div>
      </div>
      <div class="panel task-stat">
        <div class="panel-header">
          <i class="el-icon-s-data"></i>
          <span>救援任务统计</span>
        </div>
        <div class="divider-line"></div>
        <div class="chart-container">
          <!-- 救援任务环形图容器 -->
          <div id="rescueTaskChart" style="width: 100%; height: 180px;"></div>
        </div>
      </div>
      <div class="panel user-profile">
        <div class="panel-header">
          <i class="el-icon-s-data"></i>
          <span>用户概况</span>
        </div>
        <div class="divider-line"></div>
        <div class="profile-cards">
          <div class="profile-card">
            <span class="label">累计商户数</span>
            <span class="number">{{merchantCount.data || '0'}}</span>
          </div>
          <div class="profile-card">
            <span class="label">新增用户数</span>
            <span class="number">{{userAddCount.data || '0'}}</span>
          </div>
          <div class="profile-card">
            <span class="label">累计用户数</span>
            <span class="number">{{userCount.data || '0'}}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部注册用户分析柱状图 -->
    <div class="bottom-section">
        <div class="panel-header">
          <i class="el-icon-s-data"></i>
          <span>注册用户分析</span>
          <span v-if="currentMonth" class="current-month">
            {{ currentMonth }} 新增用户统计（总计：{{ monthlyTotal }}人）
          </span>
        </div>
        <div class="divider-line"></div>
        <div class="chart-container1">
          <div id="userBarChart" style="width: 100%; height: 350px;"></div>
        </div>
      </div>
  </div>
</template>

<script>
import {getOrderCount,getOrdersunmoney,getUserAddCount,getmerchantAddCount,getMerchantCount,getUserCount
        ,getOrderTypeCount,getAllOrderTypeCount,getAllRescueCount,getRescueCount,getUserAddCountByMonth} from "@/api/system/carcorder.js";
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
// 引入 ECharts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts';
// 若依 Cloud 可能已封装请求，这里模拟数据，实际可替换为接口请求
// import { getDashboardData } from '@/api/dashboard';

export default {
  name: 'Dashboard',
  setup() {
    // 响应式数据
    const loading = ref(false); // 加载状态
    const startTime = ref('');
    const currentMonth = ref(''); // 当前展示的月份
    const monthlyTotal = ref(0); // 当月新增用户总数
    const orderCount = ref({});
    const orderSumMoney = ref({});
    const userAddCount = ref({});
    const merchantAddCount = ref({});
    const userCount = ref({});
    const merchantCount = ref({});
    // 订单类型统计数据（用于饼图）
    const orderTypeData = ref([
      { value: 0, name: '维修类' },
      { value: 0, name: '洗车类' },
      { value: 0, name: '保养类' }
    ]);
    // 饼图实例（全局保存，用于后续更新）
    let orderPieChart = null;
    // 救援任务统计数据（用于环形图）
    const rescueTaskData = ref([
        { value: 0, name: '待处理' },
        { value: 0, name: '已处理' }
    ]);
    // 环形图实例（全局保存，用于后续更新）
    let rescueTaskChart = null;
    let userBarChart = null; // 用户柱状图实例

    onMounted(() => {
      // 默认查询当天（可根据需求调整为默认空）
      // const today = new Date().toISOString().split('T')[0];
      const today = '';
      startTime.value = today;
      // 初始化所有图表
      initCharts();
      // 页面加载时查询所有天数的订单类型数据以及其他表格的数据
      loadAllOrderTypeData();
      handleQuery();
    });

    // 初始化所有图表
    const initCharts = () => {
      // 初始化订单饼图（只创建实例，不设置数据）
      orderPieChart = echarts.init(document.getElementById('orderPieChart'));
      // 初始化救援任务饼图（只创建实例，不设置数据）
      rescueTaskChart = echarts.init(document.getElementById('rescueTaskChart'));
      // 初始化统计图（保持不变）
      userBarChart = echarts.init(document.getElementById('userBarChart')); // 初始化用户柱状图
    };

    // 加载所有天数的订单类型数据及全部数据方法（页面初始化时调用）
    const loadAllOrderTypeData = async () => {
      try {
        // 1. 获取商户总数
        const merchantCount1 = await getMerchantCount();
        merchantCount.value = merchantCount1;

        // 2. 获取用户总数
        const userCount1 = await getUserCount();
        userCount.value = userCount1;

        // 3. 获取订单所有数据类型
        const res = await getAllOrderTypeCount();
        // 假设接口返回格式：{ 汽车维修类订单数: 100, 汽车保养类订单数: 200, 专业洗车类订单数: 150 }
        const data = res.data || {};
        console.log("维修类订单数：", data.汽车维修类订单数);
        console.log("保养类订单数：", data.汽车保养类订单数);
        // 转换为饼图所需格式
        orderTypeData.value = [
          { value: data.汽车维修类订单数 || 0, name: '维修类' },
          { value: data.专业洗车类订单数 || 0, name: '洗车类' },
          { value: data.汽车保养类订单数 || 0, name: '保养类' }
        ];
        // 更新饼图
        updateOrderPieChart();

        // 4. 获取全部救援任务数据
        const rescueTaskData1 = await getAllRescueCount();
        const allRescueData = rescueTaskData1.data || {};
        rescueTaskData.value = [
          { value: allRescueData.未处理数目 || 0, name: '待处理' },
          { value: allRescueData.已处理数目 || 0, name: '已处理' }
        ];
        // 更新救援任务环形图
        updateRescueTaskChart();
      } catch (error) {
        ElMessage.error('加载所有订单类型数据失败：' + error.message);
        console.error(error);
      }
    };

    // 日期查询方法
    const handleQuery =async() => {
      // 1. 验证日期是否选择
      if (!startTime.value) {
        ElMessage.warning('请选择查询日期');
        return;
      }
      try {
        loading.value = true;
        // 解析年月（从选择的日期中提取）
        const [year, month, day] = startTime.value.split('-').map(Number);
        currentMonth.value = `${year}年${month}月`;

        // 1. 查询当日订单总数
        const orderCount1 = await getOrderCount(startTime.value);
        orderCount.value = orderCount1;
        console.log('订单总数：', orderCount.value);

        // 2. 查询当日订单总金额
        const orderSumMoney1 = await getOrdersunmoney(startTime.value);
        orderSumMoney.value = orderSumMoney1;
        console.log('订单总金额：', orderSumMoney.value);

        // 3. 获取当日新增用户数
        const userAddCount1 = await getUserAddCount(startTime.value);
        userAddCount.value = userAddCount1;

        // 4. 获取当日新增商户数
        const merchantAddCount1 = await getmerchantAddCount(startTime.value);
        merchantAddCount.value = merchantAddCount1;

        //7.查询当天的订单类型数据
        const orderTypeRes = await getOrderTypeCount(startTime.value);
        const typeData = orderTypeRes.data || {};
        // 转换为饼图所需格式
        orderTypeData.value = [
          { value: typeData.汽车维修类订单数 || 0, name: '维修类' },
          { value: typeData.专业洗车类订单数 || 0, name: '洗车类' },
          { value: typeData.汽车保养类订单数 || 0, name: '保养类' }
        ];
        // 更新饼图
        updateOrderPieChart();

        //8.查询当天的救援任务数据
        const rescueTaskRes = await getRescueCount(startTime.value);
        // 处理无数据情况，确保始终有值（0）
        const rescueData = rescueTaskRes.data || {};
        rescueTaskData.value = [
          { value: rescueData.未处理数目 || 0, name: '待处理' },
          { value: rescueData.已处理数目 || 0, name: '已处理' }
        ];
        // 更新救援任务环形图
        updateRescueTaskChart();

        // 9. 查询当月用户统计数据并更新柱状图
        const userStatsRes = await getUserAddCountByMonth(year, month, day);
        console.log('用户统计数据1：', userStatsRes);
        if (userStatsRes.code === 200) {
          const stats = userStatsRes.data;
          console.log('用户统计数据：', stats);
          monthlyTotal.value = stats.totalUsers; // 展示当月总数
          updateUserBarChart(stats.dateLabels, stats.userCounts); // 动态更新图表
        } else {
          ElMessage.warning('获取月度用户数据失败：' + userStatsRes.msg);
        }

        ElMessage.success('查询成功');
      } catch (error) {
        ElMessage.error('查询失败：' + (error.message || '网络异常'));
        console.error('接口请求失败：', error);
      } finally {
        loading.value = false;
      }

      // 2. 模拟接口请求（实际项目替换为真实接口）
      console.log('查询日期：', startTime.value);
    };

    // 更新救援任务环形图
    const updateRescueTaskChart = () => {
      const option ={
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['待处理', '已处理']
        },
        series: [
          {
            name: '救援任务统计',
            type: 'pie',
            radius: ['40%', '70%'],
            data: rescueTaskData.value, // 使用响应式数据
            label: {
              show: true,
              position: 'outside'
            }
          }
        ]
      };
      rescueTaskChart.setOption(option);
    };

    // 更新订单饼图（抽取为独立方法，方便多次调用）
    const updateOrderPieChart = () => {
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 10,
          data: ['维修类', '洗车类', '保养类']
        },
        series: [
          {
            name: '订单统计',
            type: 'pie',
            radius: ['40%', '70%'],
            data: orderTypeData.value, // 使用响应式数据
            label: {
              show: true,
              position: 'outside'
            }
          }
        ]
      };
      orderPieChart.setOption(option);
    };

    // 核心修改：更新用户柱状图（根据后端数据动态渲染）
    const updateUserBarChart = (dateLabels, userCounts) => {
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: '{b}: {c} 人' // 显示日期和对应人数
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '15%', // 增加底部距离，防止日期标签被截断
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: dateLabels, // 动态设置X轴日期标签（如1日、2日...）
          axisLabel: {
            interval: 0,
            rotate: 45, // 旋转45度防止标签重叠
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          name: '新增用户数',
          min: 0,
          minInterval: 1 // 确保Y轴为整数
        },
        series: [
          {
            name: '新增用户',
            data: userCounts, // 动态设置每日用户数
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#409eff' },
                { offset: 1, color: '#69b1ff' }
              ])
            }
          }
        ]
      };
      userBarChart.setOption(option);
    };

    // 监听窗口大小变化，重绘图表
    window.addEventListener('resize', () => {
      orderPieChart?.resize();
      rescueTaskChart?.resize();
      userBarChart?.resize();
    });

    return {
      startTime,
      loading,
      orderCount,
      orderSumMoney,
      userAddCount,
      merchantAddCount,
      merchantCount,
      userCount,
      currentMonth,
      monthlyTotal,
      handleQuery // 暴露查询方法
    };
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background-color: #F7F7F7;
}

/* 顶部经营数据标题与日期选择 */
.top-operation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.operation-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}
.date-picker {
  margin-right: 40px;
  display: flex;
  align-items: center;
}
.date-picker span {
  margin: 0 5px;
}

/* 顶部统计卡片 */
.top-stats {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 增加卡片之间的间距 */
  margin-bottom: 20px;
}
.stat-card {
  flex: 1; /* 让每个卡片平分宽度 */
  border-radius: 8px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  box-sizing: border-box;
}

.stat-img {
  width: 36px;
  height: 36px;
  object-fit: contain; /* 保持图片比例，防止变形 */
  opacity: 0.9; /* 轻微透明，与文字协调 */
}
.stat-content {
  display: flex;
  flex-direction: column;
}
.stat-label {
  font-size: 14px;
  margin-bottom: 4px;
  opacity: 0.9;
}
.stat-value {
  font-size: 18px;
  font-weight: bold;
}
.stat-card .icon {
  font-size: 28px;
}
.stat-card .title {
  font-size: 14px;
  margin-bottom: 8px;
}
.stat-card .value {
  font-size: 20px;
  font-weight: bold;
}
.stat-card .icon {
  font-size: 24px;
  align-self: flex-end;
  margin-top: auto;
}
.green {
  background-color: #28a745;
}
.purple {
  background-color: #6f42c1;
}
.blue {
  background-color: #007bff;
}
.orange {
  background-color: #fd7e14;
}

/* 分割线样式，模拟设计图中的横线 */
.divider-line {
  height: 2px;
  background-color: #e6e6e6; /* 浅灰色分割线，可根据实际调整 */
  margin-bottom: 20px; /* 与下方统计卡片拉开距离 */
}

/* 中间模块 */
.middle-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.panel {
  width: 32%;
  border: 1px solid grey;
  border-radius: 8px;
  padding: 15px;
}
.panel-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.panel-header i {
  margin-right: 8px;
  color: #409eff;
}
.chart-container {
  width: 100%;
  height: 180px;
}
.chart-container1 {
  width: 100%;
  height: 350px;
}
.profile-cards {
  display: flex;
  justify-content: space-between;
}
.profile-card {
  width: 32%;
  height: 200rpx;
  text-align: center;
  padding: 15px 0;
  border: 1px solid grey;
  border-radius: 8px;
}
.profile-card .label {
  display: block;
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}
.profile-card .number {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* 底部模块 */
/* 原有样式保持不变，新增以下样式 */
.current-month {
  margin-left: 15px;
  font-size: 14px;
  color: #666;
  font-weight: normal;
}

/* 优化X轴标签显示 */
.chart-container1 {
  margin-top: 10px;
}

/* 响应式调整，防止日期标签重叠 */
@media screen and (max-width: 1200px) {
  .xAxis-label {
    rotate: 60deg;
  }
}

.bottom-section {
  border: 1px solid grey;
  border-radius: 8px;
  padding: 15px;
}
/* 优化查询按钮与日期选择器的间距 */
.date-picker .el-button {
  margin-left: 10px;
}

/* 按钮悬停效果增强 */
.date-picker .el-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
</style>